<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8" />

    <title>Splink Clerical Labelling Tool</title>
    <meta name="description" content="desc" />



    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600&display=swap">


</head>

<body>

    {# The observable standard library #}
    {# This is usually made available automatically within an observable notebook #}
    {# Unfortunately, when used in a notebook, it tries to retrieve #}
    {# libraries from online CDNs. #}
    {# https://github.com/observablehq/runtime#Runtime #}

    {# The issue is that within the notebook, it's using functions from the stdlib like #}
    {# the html`` template literal, and Generators.observe #}
    {# We could bundle those in splink_vis_utils, but then they'd all have to be prefixed #}
    {# with splink_vis_utils like splink_vis_utils.html, and I struggled to get this to work #}

    {# So instead, I inline the stdlib code #}
    <script>{{stdlib}}</script>
    <script>{{d3}}</script>

    {# And then globally load the functions we need #}
    {# This also seems to avoid the problem of stdlib trying and failing to load d3 from a CDNs #}
    {# and causing the whole notebook to error #}


    <script>
    const lib = new window.observablehq.Library()


    width = lib.width()
    html = lib.html()
    Generators = lib.Generators
    DOM = lib.DOM


    </script>


    <div id="observablehq-styles"></div>
    <div id="outer_container">

        <div id="observablehq-styles"></div>
        <h1>Splink Clerical Labelling Tool</h1>
        <div id="observablehq-beta_header"></div>
        <div id="observablehq-blurb"></div>
        <div id="observablehq-checkboxes"></div>
{% if show_splink_predictions_in_interface %}
        <div id="observablehq-show_splink_predictions_in_interface"></div>
{% endif %}
        <div id="observablehq-existing_labels_csv"></div>
        <div id="observablehq-table-interface"></div>
        <div id="observablehq-dl"></div>


{% if view_in_jupyter %}
        <div id="observablehq-labels_in_textarea"></div>
{% endif %}


    </div>

<script>
{% if show_splink_predictions_in_interface %}
        SHOW_SPLINK_PREDICTIONS = true
{% else %}
        SHOW_SPLINK_PREDICTIONS = false
{% endif %}
</script>


{% if pairwise_comparison_data %}
    <script>
        pairwise_comparison_data_from_splink = {{ pairwise_comparison_data }};
    </script>
{% endif %}

{% if splink_settings_data %}
    <script>
        splink_settings_from_splink = {{ splink_settings_data }};
    </script>
{% endif %}

<script>
        {{slt}}
    </script>

<script type="module">

    new slt.Runtime({}).module(slt.define, name => {

        if (name === "styles") return new slt.Inspector(document.querySelector("#observablehq-styles"));
        if (name === "viewof checkboxes") return new slt.Inspector(document.querySelector("#observablehq-checkboxes"));

{% if show_splink_predictions_in_interface %}
        if (name === "viewof show_splink_predictions_in_interface") return new slt.Inspector(document.querySelector("#observablehq-show_splink_predictions_in_interface"));
{% endif %}
        if (name === "viewof table_interface") return new slt.Inspector(document.querySelector("#observablehq-table-interface"));
        if (name === "viewof existing_labels_csv") return new slt.Inspector(document.querySelector("#observablehq-existing_labels_csv"));
        if (name === "dl") return new slt.Inspector(document.querySelector("#observablehq-dl"));

        if (name === "blurb") return new slt.Inspector(document.querySelector("#observablehq-blurb"));
        if (name === "beta_header") return new slt.Inspector(document.querySelector("#observablehq-beta_header"));

{% if view_in_jupyter %}
        if (name === "labels_in_textarea") return new slt.Inspector(document.querySelector("#observablehq-labels_in_textarea"));
{% endif %}



    })
</script>


</body>

</html>

